<template>
  <div>
    <el-card shadow="false" class="box-card">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <div class="text item">
        <el-row :gutter="24">
          <el-col :span="5" :offset="0">
            <span>订单编号</span
            ><el-input
              style="width: 200px; margin-left: 10px"
              v-model="form.orderSn"
              placeholder="请输入订单编号"
            ></el-input>
          </el-col>
          <el-col :span="5" :offset="0">
            <span>订单类型</span>
            <el-select
              style="width: 200px; margin-left: 10px"
              v-model="form.orderType"
              placeholder="请选择订单类型"
            >
              <el-option
                v-for="item in orderType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" :offset="0">
            <span>支付方式</span>
            <el-select
              style="width: 200px; margin-left: 10px"
              v-model="form.payType"
              placeholder="请选择支付方式"
            >
              <el-option
                v-for="item in payType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" :offset="0">
            <span>订单状态</span>
            <el-select
              style="width: 200px; margin-left: 10px"
              v-model="form.status"
              placeholder="请选择支付方式"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-button @click="reset">重置</el-button>
            <el-button @click="search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card shadow="false" class="box-card">
      <el-table
        ref="singleTable"
        :data="tableData"
        border
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="订单编号"
        ></el-table-column>
        <el-table-column align="center" prop="payType" label="支付方式">
          <template slot-scope="scope">
            <el-tag style="background: #1577FE;color:white;width:58px;" v-if="scope.row.payType == 1"
              ><span style="font-size:24px;line-height:28px" class="iconfont">&#xe60b;</span></el-tag
            >
            <el-tag style="background: #909399;color:white;width:58px" type="info" v-if="scope.row.payType == 0"
              >未支付</el-tag
            >
            <el-tag style="background: #3CB035;color:white;width:58px;" type="success" v-if="scope.row.payType == 2"
              ><span style="font-size:24px;line-height:28px" class="iconfont">&#xe82c;</span></el-tag
            >
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="订单状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | status">{{
              scope.row.status | orderProcessText
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column align="center" prop="paymentTime" label="付款时间">
        </el-table-column>
        <el-table-column align="center" prop="memberUsername" label="用户账号">
        </el-table-column>
        <el-table-column align="center" prop="totalAmount" label="总金额">
        </el-table-column>
        <el-table-column align="center" prop="totalAmount" label="总金额">
          <template slot-scope="scope">
            <span>{{ scope.row.note ? scope.row.note : "买家无备注" }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="address" label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row.id)" type="primary"
              ><i style="margin-right: 10px" class="el-icon-view"></i
              >查看订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @limitfather="limitchange"
        @startfather="startchange"
        :totalNumber="totalNumber"
      ></pagination>
    </el-card>
  </div>
</template>

<script>
import orderListApi from "@/api/order/orderList/index";
import pagination from "@/components/common/pagination";
export default {
  components: { pagination },

  data() {
    return {
      totalNumber: 0,
      tableData: [],
      start: 1,
      limit: 10,
      form: {
        deliverySn: "",
        id: "",
        memberUsername: "",
        orderSn: "",
        orderType: "",
        payType: "",
        status: "",
      },
      orderType: [
        {
          value: 0,
          label: "正常订单",
        },
        {
          value: 1,
          label: "秒杀订单",
        },
      ],
      payType: [
        {
          value: 0,
          label: "未支付",
        },
        {
          value: 1,
          label: "支付宝",
        },
        {
          value: 2,
          label: "微信",
        },
      ],
      status: [
        {
          value: 0,
          label: "待付款",
        },
        {
          value: 1,
          label: "待发货",
        },
        {
          value: 2,
          label: "已发货",
        },
        {
          value: 3,
          label: "已完成",
        },
        {
          value: 4,
          label: "已关闭",
        },
        {
          value: 5,
          label: "无效订单",
        },
      ],
    };
  },
  filters: {
    orderProcessText(process) {
      var text = "等待处理";
      switch (JSON.stringify(process)) {
        case "0":
          text = "待付款";
          break;
        case "1":
          text = "待发货";
          break;
        case "2":
          text = "已发货";
          break;
        case "3":
          text = "已完成";
          break;
        case "4":
          text = "已关闭";
          break;
        case "5":
          text = "无效订单";
          break;
        default:
          break;
      }
      return text;
    },
    status(process) {
      var text = "";
      switch (JSON.stringify(process)) {
        case "0":
          text = "danger";
          break;
        case "1":
          text = "warning";
          break;
        case "2":
          text = "";
          break;
        case "3":
          text = "info";
          break;
        case "4":
          text = "warning";
          break;
        case "5":
          text = "info";
          break;

        default:
          break;
      }
      return text;
    },
  },
  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 来自子组件切换limit
    limitchange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 来自子组件切换start
    startchange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    // 查看订单详细
    edit(id) {
      console.log(id);
      this.$router.push({
        name: "detail",
        query: {
          orderId: id,
        },
      });
    },
    // 重置
    reset() {
      this.init();
      this.form = {
        deliverySn: "",
        id: "",
        memberUsername: "",
        orderSn: "",
        orderType: "",
        payType: "",
        status: "",
      };
      this.start = 1;
      this.limit = 8;
    },
    // 搜索
    search() {
      this.init(this.form);
    },
    // 获取数据
    init(item) {
      orderListApi
        .findOrdersByPage(this.start, this.limit, item)
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.tableData = res.data.rows;
            this.totalNumber = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
  margin-bottom: 10px;
}
</style>